<template>
  <view
    class="gesture-lock"
    :class="{ error: error }"
    :style="{ width: containerWidth + 'rpx', height: containerWidth + 'rpx' }"
    @touchstart.stop="onTouchStart"
    @touchmove.stop="onTouchMove"
    @touchend.stop="onTouchEnd"
  >
    <!-- 同级 v-for 的 key 重复会有问题，需要套一层。 -->
    <!-- 9 个圆 -->
    <view>
      <view
        v-for="(item, i) in circleArray"
        :key="i"
        class="cycle"
        :class="{ check: item.check }"
        :style="{
          left: item.style.left,
          top: item.style.top,
          width: item.style.width,
          height: item.style.width
        }"
      >
      </view>
    </view>
    <view>
      <!-- 已激活锁之间的线段 -->
      <view
        v-for="(item, i) in lineArray"
        :key="i"
        class="line"
        :style="{
          left: item.activeLeft,
          top: item.activeTop,
          width: item.activeWidth,
          '-webkit-transform': 'rotate(' + item.activeRotate + ')',
          transform: 'rotate(' + item.activeRotate + ')'
        }"
      >
      </view>
    </view>
    <!-- 最后一个激活的锁与当前位置之间的线段 -->
    <view
      class="line"
      :style="{
        left: activeLine.activeLeft,
        top: activeLine.activeTop,
        width: activeLine.activeWidth,
        '-webkit-transform': 'rotate(' + activeLine.activeRotate + ')',
        transform: 'rotate(' + activeLine.activeRotate + ')'
      }"
    >
    </view>
  </view>
</template>
<script>
import GestureLock from './gestureLock'

export default {
  name: 'index',
  props: {
    /**
     * 容器宽度
     */
    containerWidth: {
      type: [Number, String],
      default: 0
    },
    /**
     * 圆的半径
     */
    cycleRadius: {
      type: [Number, String],
      default: 0
    },
    /**
     * 已设定的密码
     */
    password: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      gestureLock: {}, // 锁对象
      circleArray: [], // 圆对象数组
      lineArray: [], // 已激活锁之间的线段
      activeLine: {}, // 最后一个激活的锁与当前位置之间的线段
      error: false
    }
  },
  methods: {
    onTouchStart (e) {
      this.gestureLock.onTouchStart(e)
      this.refesh()
    },

    onTouchMove (e) {
      this.gestureLock.onTouchMove(e)
      this.refesh()
    },

    onTouchEnd (e) {
      const checkPoints = this.gestureLock.onTouchEnd(e)
      if (
        !this.password.length ||
        checkPoints.join('') == this.password.join('')
      ) {
        this.refesh()
        this.$emit('end', checkPoints)
      } else {
        this.error = true
        setTimeout(() => {
          this.refesh()
          this.$emit('end', checkPoints)
        }, 800)
      }
    },
    refesh () {
      this.error = false
      this.circleArray = this.gestureLock.getCycleArray()
      this.lineArray = this.gestureLock.getLineArray()
      this.activeLine = this.gestureLock.getActiveLine()
    }
  },
  mounted () {
    this.gestureLock = new GestureLock(this.containerWidth, this.cycleRadius)
    this.refesh()
  }
}
</script>

<style scoped>
.gesture-lock {
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  overflow: auto;
}

.gesture-lock .cycle {
  box-sizing: border-box;
  position: absolute;
  border: 2px solid #66aaff;
  border-radius: 50%;
}

.gesture-lock .cycle.check:after {
  content: "";
  display: block;
  position: absolute;
  width: 32%;
  height: 32%;
  border: 2px solid #66aaff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gesture-lock .line {
  height: 0;
  border-top: 2px solid #66aaff;
  position: absolute;
  transform-origin: left center;
}

.gesture-lock.error .cycle.check,
.gesture-lock.error .cycle.check:after,
.gesture-lock.error .line {
  border-color: #ffa197;
}
</style>
